<!-- 批量货主支付dialog -->
<template>
    <div class='' v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.6)">
        <el-form ref="form" :model="formInline" label-width="200px" class="custom-form" :rules="rules">
            <el-form-item label="账户余额">
                <el-input class="custom-input" type="text" :value="form.money" placeholder="" readonly>
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="中原银行子账号">
                <el-input class="custom-input" type="text" :value="form.zh" placeholder="" readonly>
                </el-input>
            </el-form-item>
            <el-form-item label="本次批量支付含税金额">
                <el-input class="custom-input" type="text" :value="form.money_bill" placeholder="" readonly>
                </el-input>
            </el-form-item>
            <el-form-item label="本次批量支付总金额">
                <el-input class="custom-input" type="text" :value="form.zyf" placeholder="" readonly>
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="本次批量支付预付金额">
                <el-input class="custom-input" type="text" :value="form.pay_money" placeholder="" readonly>
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="本次批量支付实结金额">
                <el-input class="custom-input" type="text" :value="form.real_money" placeholder="" readonly>
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="总单数">
                <el-input class="custom-input" type="text" :value="form.num" placeholder="" readonly>
                    <template slot="append">笔</template>
                </el-input>
            </el-form-item>
            <el-form-item label="总吨数">
                <el-input class="custom-input" type="text" :value="form.kg" placeholder="" readonly>
                    <template slot="append">吨</template>
                </el-input>
            </el-form-item>

            <el-form-item label="银行信息" prop="bankId">
                <el-select v-model="formInline.bankId" placeholder="选择银行信息">
                    <el-option v-for="(item, index) in bankList" :key="index"
                        :label="item.name + ' -- ' + item.kahao + ' -- ' + item.khh" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="支付密码" prop="pwd">
                <el-input class="custom-input pwd-input" type="password" v-model="formInline.pwd" show-password
                    placeholder="">
                </el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="submit" title="余额不足,请先充值!" :disabled="sureDisabled">确认支付</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { batchPaymentDetail, getOwnerBank, batchPayment } from '@/api/childCompany/moneyManagment';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ['batchPayIds'],
    data() {
        //这里存放数据
        return {
            form: {
            },
            loading: false,
            bankList: [],
            formInline: {//传递给接口的form
                bankId: null,
                pwd: "",
            },
            rules: {
                bankId: { required: true, message: '请选择银行信息', trigger: 'change' },
                pwd: { min: 6, max: 6, message: '密码长度为6位', trigger: 'change', },
            },
            sureDisabled: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async batchPaymentDetail() {
            this.loading = true;
            let res = await batchPaymentDetail({
                id: this.batchPayIds,
            })
            this.loading = false;

            if (res.code == 200) {
                this.form = res.data;
                if (Number(this.form.money) < Number(this.form.real_money)) {
                    this.$message.error('余额不足,请先充值!');
                    this.sureDisabled = true;
                }
            }else{
                this.$emit('errorClose')
            }
        },
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.$confirm('确定批量支付吗？', '系统提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        const loading = this.$loading({
                            lock: true,
                            text: '请求中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)',
                        });
                        let res = await batchPayment({
                            ...this.formInline,
                            id: this.batchPayIds
                        });
                        loading.close();
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                        } else {
                            this.$message.error(res.msg)
                        }
                        this.$emit('closeDialog')
                    }).catch(() => { });
                } else {
                    return false;
                }
            });

        },
        async batchPayment() {

        },
        async getOwnerBank() {
            let res = await getOwnerBank();
            if (res.code == 200) {
                this.bankList = res.data;
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.batchPaymentDetail();
        this.getOwnerBank();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.custom-form {
    margin: 20px 24% 20px 16%;


    ::v-deep .el-form-item__label {
        font-size: 15px;
        font-weight: 600;
    }

    ::v-deep .el-input__inner {
        color: red;
    }



    ::v-deep .pwd-input {
        .el-input__inner[type="password"] {
            letter-spacing: 10px;
        }
    }
}
</style>